@charset "utf-8";
html,body,div,span,a,ul,ol,li,img,h1,h2,h3,h4,h5,h6,input,textarea,form{padding:0;border:0;margin:0;outline:0;box-sizing:border-box;}
html{position:absolute;top:0;right:0;bottom:0;left:0;}
body{width:100%;height:100%;padding-top:100px;}
.tpl{width:600px;height:auto;border:1px solid #ddd;margin:0 auto;padding:0 50px;}
.tpl > div{margin-bottom:50px;margin-top:50px;}
.clearfix::after{content:"";display:table;clear:both;overflow:hidden;height:0;}
.container{width:600px;height:auto;border:1px solid #ddd;margin:0 auto;padding:100px 50px;}

.list-panel{border:1px solid #ddd;}
.list-panel .ul-main:last-child{border-bottom:0;}
.list-panel h3{line-height:40px;font-size:14px;padding:0 10px;}
.list-panel .ul-sub{display:none;}
.list-panel .ul-main{cursor:pointer;border-bottom:1px solid #eee;}
.list-panel .ul-main .ul-sub .li{line-height:30px;border-top:1px dashed #ddd;padding:0 20px;}
.list-panel .ul-main:hover .ul-sub{display:block;}

.tab-panel{border:1px solid #ddd;}
.tab-panel > h3{width:33.333333%;float:left;line-height:40px;text-align:center;border-right:1px solid #ddd;cursor:pointer;}
.tab-panel > h3:last-child{border-right:0;}
.tab-panel .tab-main{border-top:1px solid #ddd;}
.tab-panel .tab-content{display:none;height:300px;line-height:300px;text-align:center;}
.tab-panel .tab-content:first-child{display:block;}
.tab-panel > h3:hover{background-color:#333;color:#fff;}
.tab-panel > h3:nth-child(1):hover ~ .tab-main .tab-content:nth-child(1){display:block;}
.tab-panel > h3:nth-child(1):hover ~ .tab-main .tab-content:not(:nth-child(1)){display:none;}
.tab-panel > h3:nth-child(2):hover ~ .tab-main .tab-content:nth-child(2){display:block;}
.tab-panel > h3:nth-child(2):hover ~ .tab-main .tab-content:not(:nth-child(2)){display:none;}
.tab-panel > h3:nth-child(3):hover ~ .tab-main .tab-content:nth-child(3){display:block;}
.tab-panel > h3:nth-child(3):hover ~ .tab-main .tab-content:not(:nth-child(3)){display:none;}
.tab-panel .tab-content:hover{display:block;}
